<template>
  <div class="box">
    <div class="box-1">
      <div class="box-ico" @click="quyu">
        <span class="sp-1"> 鄞州区 </span>
        <img src="../../assets/Home/z-6.png" />
      </div>
      <div class="box-shi">
        <Hour></Hour>
      </div>
    </div>
    <!-- 一个盒子 -->
    <div class="box-max">
      <div class="box-max1" v-for="(item, index) in list" :key="index">
        <IcoIndex :text="item.text" :a="item.a" @look="look"></IcoIndex>
        <component
          v-if="item.type"
          :is="item.type"
          :data="item.data"
          @add="add"
          :background="item.ba"
          :img="item.img"
          @dang="chakan"
        ></component>
      </div>
    </div>
    <!-- 弹层 -->
    <Detaillayer ref="dlog"></Detaillayer>
    <Detaillayer ref="dlog1"></Detaillayer>
    <Detaillayer ref="cha1" :imgs1="imgs1"></Detaillayer>
  </div>
</template>

<script lang="ts" setup>
import IcoIndex from '@/components/IcoIndex.vue'
import SwepIndex from '@/components/SwepIndex.vue'
import ListIndex from '@/components/ListIndex.vue'
import Details from '@/components/Details.vue'
import Carousel from '@/components/Carousel.vue'
import Hour from '@/components/Hour.vue'
import Detaillayer from '@/components/Detaillayer.vue'
import { onBeforeUnmount, onMounted, provide, ref } from 'vue'
import { useRouter } from 'vue-router'
import imgase from '@/assets/Home/bg-.png'
const list = [
  {
    text: '党员公式',
    a: '',
    type: SwepIndex
  },
  {
    text: '党员学安全',
    a: '1',
    type: ListIndex
  },
  {
    text: '党员讲安全',
    a: '1',
    type: ListIndex
  },
  {
    text: '党员抓安全',
    a: '',
    type: Details
  },
  {
    text: '典型人物',
    a: '1',
    type: Carousel,
    img: [
      {
        imge: imgase
      },
      {
        imge: imgase
      },
      {
        imge: imgase
      }
    ],
    data: '云龙镇党委书记洪峰上榜 “六争攻坚”先锋',
    ba: 'linear-gradient(180deg, #FF8080 0%, #992626 100%)'
  },
  {
    text: '典型事迹',
    a: '1',
    type: Carousel,
    data: '《二零二三年第一季度宁波好人榜》新鲜出炉',
    ba: 'linear-gradient(180deg, #FFD480 0%, #B1642D 100%)',
    img: [
      {
        imge: imgase
      },
      {
        imge: imgase
      },
      {
        imge: imgase
      }
    ]
  }
]

const dlog = ref()
const router = useRouter()
const look = (id: string) => {
  router.push({ path: '/partymembers', query: { id } })
  console.log(id)
}
//打开弹层
const add = (id: any) => {
  dlog.value.dialogTableVisible = true
  console.log(id)
}
const dlog1 = ref()
const quyu = () => {
  dlog1.value.dialogTableVisible = true
}
//典型打开弹层
const cha1 = ref()
const imgs1 = ref()
const chakan = (img: any) => {
  cha1.value.dialogTableVisible = true
  console.log(img)
  imgs1.value = img
  //这个可以到pinli也可以在组件中进行传
}
// //弹层元素拿取得方法
// type imgsa = {
//   name?: string
//   imgs1?: any
// }
// const Doms = <imgsa>[
//   {
//     name: 'dlog',
//     imgs1: ''
//   },
//   {
//     name: 'dlog1',
//     imgs1: ''
//   },
//   {
//     name: 'cha1',
//     imgs1: imgs1
//   }
// ]
</script>

<style lang="scss" scoped>
.box {
  width: 1920px;
  height: 1000px;
  margin: 0 auto;
  /* width: 100%;
  height: 94%; */
  position: fixed;
  top: 30px;
  background-image: url('../../assets/Home/p-1.png'),
    url('../../assets/Home/y-2.png'), url('../../assets/Home/y-1.png');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    right,
    left center,
    right center;
  background-size:
    auto,
    10% 100%,
    10% 100%;
  box-sizing: border-box;
  padding: 0 20px;
  /* background-color: red; */
  .box-1 {
    width: 100%;
    height: 60px;
    margin-top: 50px;
    /* background-color: aqua; */
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .box-ico {
      width: 176px;
      margin-left: 30px;
      height: 60px;
      background-image: url('../../assets/Home/z-5.png');
      background-repeat: no-repeat;
      background-size: cover;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .sp-1 {
        font-size: 18px;
        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
        font-weight: bold;
        color: #ffcc66;
      }
    }
    .box-shi {
      width: 230px;
      height: 60px;
      /* background-color: #ffcc66; */
      /* line-height: 60px; */
      /* display: flex; */
    }
  }
  .box-max {
    width: 100%;
    height: 900px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    /* background-color: red; */
    padding: 30px 0;
    .box-max1 {
      width: 30%;
      height: 400px;
      margin-left: 50px;
      margin-bottom: 10px;
      /* background-color: rgb(21, 177, 54); */
      box-sizing: border-box;
      &:nth-child(2) {
        background-image: url('../../assets/Home/b-1.png');
        background-size: cover; /* 让背景图片覆盖整个元素 */
        background-repeat: no-repeat; /* 不重复背景图片 */
      }
    }
  }
}
</style>
